<template>
  <div id="col" style="width: 95%; height: 90%"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "column",
  props: ["column"],
  data() {
    return {
      // 页面查询数据
      data: [],
      areaData: [],
      queryData: {
        selectArea: 0,
        date: [],
      },
      myChart: null,
      option: {},
    };
  },
  mounted() {
    setTimeout(() => {
      this.hadleGetFilesListApi();
    });
  },
  methods: {
    hadleGetFilesListApi(x) {
      console.log(x)
      const option = {
        title: [{
          text: '回收统计',
          textStyle: {
            color: 'rgb(30,30,30)',
            fontSize: 20,
            fontWeight:550
          },
          x: 'left'
        }],
        color: ['#ffdf25', '#36a9ce', '#d0e17d'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['可回收物', '易腐垃圾', '有毒有害', '其他垃圾'],
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#b5bac3',//左边线的颜色
                        width:'2'//坐标线的宽度
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#b5bac3',//左边线的颜色
                        width:'2'//坐标线的宽度
                    }
                },
            }
        ],
        series: [
            {
                name: '今日',
                type: 'bar',
                barGap: 0,
                itemStyle: {
                  normal: {
                      // 定制显示（按顺序）
                      color: function(params) { 
                          var colorList = ['#0f86e8','#23be7a','#e5d71f','#0ff', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
                          return colorList[params.dataIndex] 
                      }
                  },
                },
                data: x
            },
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("col"));
      myChart.setOption(option);
      // 默认高亮
      let index = 0; // 高亮索引
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: index,
        dataIndex: index,
      });
      myChart.on("mouseover", function (e) {
        if (e.dataIndex != index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  watch: {
    column(newval) {
      let x = [newval.recycle,newval.garbage,newval.harmful,newval.other]
      console.log(x)
      this.hadleGetFilesListApi(x);
    },
  },
};
</script>
